<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/element-plus/2.0.4/index.css">
    <script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/3.2.31/vue.global.prod.js"></script>
    <script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/element-plus/2.0.4/index.full.min.js"></script>

    <link rel="stylesheet" href="./static/index.css">
    <script src="./static/importmap.js"></script>
    <title>登录页面</title>
    <style>
        .login_container {
            background-color: #2b4b6b;
            height: 100vh;
        }

        .login_box {
            width: 450px;
            height: 300px;
            background-color: #fff;
            border-radius: 3px;
            position: absolute;
            left: 50%;
            top: 40%;
            transform: translate(-50%, -50%);

            .avatar_box {
                height: 130px;
                width: 130px;
                border: 1px solid #eee;
                border-radius: 50%;
                padding: 8px;
                box-shadow: 0 0 10px #ddd;
                position: absolute;
                left: 50%;
                transform: translate(-50%, -50%);
                background-color: #fff;

                svg {
                    width: 100%;
                    height: 100%;
                    border-radius: 50%;
                    background-color: #eee;
                }
            }
        }

        .login_form {
            position: absolute;
            bottom: 0;
            width: 100%;
            padding: 0 20px;
            box-sizing: border-box;
        }
    </style>
</head>

<body>
    <script type="module">
        import ElementPlus from "element-plus";
        import { createApp } from "vue";
        import { post } from "request";
        import * as ElementPlusIconsVue from '@element-plus/icons-vue'

        const app = createApp({
            components: {},
            data() {
                return {
                    loginForm: {
                        username: "",
                        password: "",
                    }
                }
            },
            methods: {
                async handleLogin() {
                    // 检查表单是否有效（可在此处添加表单验证逻辑）
                    if (!this.loginForm.username || !this.loginForm.password) {
                        ElementPlus.ElMessage.warning('用户名和密码都不能为空！')
                        return;
                    }

                    // 发送登录请求到后台
                    const data = await post('/login', this.loginForm);
                    console.log(data)
                    if (data.token === undefined) {
                        ElementPlus.ElMessage.warning('登录失败，请检查用户名和密码！')
                        return;
                    }
                    window.location.href = "./index.html"
                },
                resetForm() {
                    this.$refs.loginFormRef.resetFields();
                }
            },
        });
        for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
            app.component(key, component)
        }
        app.use(ElementPlus);
        app.mount("#app");
    </script>
    <div id="app" v-cloak>
        <div class="login_container">
            <div class="login_box">
                <div class="title" style="margin-top: 50px; text-align: center">
                    <h1>后台管理系统</h1>
                </div>
                <el-form class="login_form" :model="loginForm" ref="loginFormRef">
                    <el-form-item>
                        <el-input size="large" v-model="loginForm.username" placeholder="请输入用户名">
                            <template #suffix>
                                <el-icon class="el-input__icon">
                                    <User />
                                </el-icon>
                            </template>
                        </el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-input size="large" v-model="loginForm.password" type="password" placeholder="请输入密码"
                            show-password></el-input>
                    </el-form-item>
                    <el-row justify="end">
                        <el-form-item style="text-align: center">
                            <el-button size="large" type="primary" @c style="width: 199px" @click="handleLogin"
                                @keyup.enter="handleLogin">登录</el-button>
                            <el-button size="large" type="info" style="width: 199px" @click="resetForm">重置</el-button>
                        </el-form-item>
                    </el-row>
                    <div style="margin-bottom: 5px;"></div>
                </el-form>
            </div>
        </div>
    </div>
</body>

</html>